<template>
	<view class="content">
		<view class="content-block" style="border-radius: 20rpx;">
			<view class="top">
				<view class="photo">
					<image :src="expertList.coverUrl" mode=""></image>
				</view>
				<view class="info">
					<view class="name">
						<view style="margin-right: 100rpx;">
							姓名
						</view>
						<text>{{expertList.name}}</text>
					</view>
					<view class="string"></view>
					<view class="post">
						<view  style="margin-right: 100rpx;">
							职务
						</view>
						<text>{{expertList.duties}}</text>
					</view>
				</view>
			</view>
			<view class="bottom">
				<view class="title">
					个人简介
				</view>
				<view class="text">
					{{expertList.introduce}}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getExpertByIdApi
	} from '@/api/specialist.js';
	export default{
		data(){
			return{
				expertList: {},
				limit: 3,
				page: 1,
				id: 1,
			}
		},
		
		methods:{
			navigate(url) {
				uni.navigateTo({
					url
				})
			},
			// 专家详情
			getExpertById() {
				getExpertByIdApi({
					page: 1,
					limit: 3,
					id: this.id
				}).then((res) => {
					this.expertList = res ?? [];
				})
			},
		},
		onLoad(e) {
			this.id = e.id;
			console.log(e)
			this.getExpertById();
		}
	}
</script>

<style lang="scss" scoped>
	.content{
		width: 100%;
		height: 100%;
		padding: 20rpx 20rpx;
		.top{
			width: 100%;
			height: 70%;
			background-color: #fff;
			padding: 40rpx;
			border-radius: 30rpx;
			
			.photo{
				width: 200rpx;
				height: 225rpx;
				background-color: #FEF6F4; 
				border-radius: 20rpx;
				margin: 0 auto;
				
				image{
					width: 100%;
					height: 100%;
					// border-radius: 20rpx;
				}
			}
			
			.info{
				.name{
					display: flex;
					margin-top: 50rpx;
				}
				
				.string{
					margin-top: 40rpx;
					width: 100%;
					height: 5rpx;
					background-color: #D8D8D8;
				}
				
				.post{
					display: flex;
					margin-top: 50rpx;
				}
			}
		}
		
		.bottom{
			width: 100%;
			padding: 30rpx;
			background-color: #fff;
			border-radius: 30rpx;
			margin-top: 30rpx;
			
			.title{
				margin: 30rpx;
				font-weight: 900;
			}
			.text{
				line-height: 55rpx;
				text-indent: 2em;
			}
		}
	}
</style>